<template>
  <div
    class="item"
    :style="{
      left: detailData.x_start + 'px',
      width: detailData.x_end - detailData.x_start + 'px'
    }"
    :data-itemmsg="JSON.stringify(detailData)"
    draggable="true"
    @dragstart="onDragstart"
    @drag="onDrag"
    @dragend="onDragend"
  >
    <el-tooltip
      effect="dark"
      :content="
        '物料:' + detailData.productCode + '/工序：' + detailData.process
      "
      placement="bottom"
      trigger="click"
      :auto-close="1500"
    >
      <div
        :data-itemmsg="JSON.stringify(detailData)"
        @dragover.prevent
        @dragenter="onDragenter"
        @drop="onDrop"
        @dragleave="onDragleave"
      >
        物料：{{ detailData.productCode }}/工序：{{ detailData.process }}
      </div>
    </el-tooltip>
  </div>
</template>

<script setup>
const emit = defineEmits([
  'startPostion',
  'dragItemMsg',
  'rowCloumn',
  'childEnter',
  'childLeave',
  'childDrop'
])
const props = defineProps({
  detailData: {
    type: Object,
    default: () => ({})
  },
  rowIndex: {
    type: Number,
    default: 0
  },
  cloumnIndex: {
    type: Number,
    default: 0
  },
  height: {
    type: String,
    default: '50px'
  }
})

const onDragstart = (e) => {
  const { offsetX, offsetY } = e
  e.dataTransfer.setDragImage(e.target, offsetX, offsetY)
  emit('startPostion', e.clientX)
  emit('dragItemMsg', JSON.parse(e.target.dataset.itemmsg))
  emit('rowCloumn', {
    rowIndex: props.rowIndex,
    cloumnIndex: props.cloumnIndex
  })
}

const onDrag = (e) => {
  // console.log('拖动中', e)
}

const onDragend = (e) => {}

const onDragenter = (e) => {
  // console.log('进入')
  emit('childEnter', e)
}

const onDrop = (e) => {
  // console.log('放置')
  emit('childDrop', e)
}

const onDragleave = (e) => {
  // console.log('离开')
  emit('childLeave', e)
}
</script>

<style lang="scss" scoped>
.item {
  position: absolute;
  top: 0;
  z-index: 2;
  height: calc(v-bind(height) - 10px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #1890ff;
  box-sizing: border-box;
  box-shadow: 0 0 5px rgba($color: #989da1, $alpha: 0.8);
  border-radius: 2px;
  border-right: 1px solid #fff;
  padding: 0 2px;
  // transition: all 0.3s;
  div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
